<template>
  <div>
    <proposer></proposer>
    <div class="header">
      快速创建你的简历
    </div>
    <div class="box">
      <el-upload class="upload-demo"
                 action="#"
                 :limit="1"
                 :auto-upload="false"
                 :show-file-list="false"
                 :file-list="fileList"
                 :on-change="loadFileList"
                 :on-success="uploadSuccess"
                 :on-exceed="handleExceed">
        <div class="card">
          <img src="@/assets/img/logo.png"
               alt="">
          <div class="jianli">
            上传简历(手机文件夹)
          </div>
          <div class="xinjian">
            上传
            <van-icon name="arrow" />
          </div>
        </div>
      </el-upload>
      <div class="card"
           @click="set">
        <img src="@/assets/img/logo.png"
             alt="">
        <div class="jianli">
          完整简历
        </div>
        <div class="xinjian">
          创建/预览
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import proposer from "@/components/proposer"
// 导入uri
import uri from "@/config/uri";
export default {
  data () {
    return {
      // 提交简历表单需要的数据
      fileList: [],
    }
  },
  methods: {
    set () {
      this.$router.push('/set')
    },
    loadFileList (file, fileList) {
      this.fileList = fileList;
      this.shangchuan()
      this.fileList = []
    },
    uploadSuccess (response, file) {
      console.log(response);
      if (response.code == 0) {
        this.$message({
          message: '导入成功',
          type: 'success'
        });
      } else {
        this.$message({
          message: '导入失败',
          type: 'error'
        });
      }
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    shangchuan () {
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      let state = { "file": this.fileList[0].raw }
      this.$http.post(uri.SaveRecruitLog, state, config).then(res => {
        if (res.state == "success") {
          // alert('推荐成功');
          console.log('推荐成功')
        } else {
          // alert('推荐失败：' + res.message);
          console.log('推荐失败：' + res.message)
        }
      });
    }
  },
  components: {
    proposer

  }
}
</script>

<style scoped>
.header {
  height: 40px;
  font-size: 18px;
  background: #9b0f15;
  color: #fff;
  line-height: 40px;
  padding-left: 10px;
}
.box {
  height: 100vh;
  background: #f6f6f6;
}
.card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #fff;
  margin-bottom: 10px;
  cursor: pointer;
}
/deep/.el-upload {
  display: block;
  text-align: left;
}
.card img {
}
.card .jianli {
  flex-grow: 8;
  margin-left: 15px;
  font-size: 13px;
  color: #8c8c8c;
}
.card .xinjian {
  flex-grow: 1;
  font-size: 13px;
  text-align: right;
  color: #8c8c8c;
}
</style>